<template>
  <div>
    <!-- 顶部面包屑标识与导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i> 后台首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>基础管理</el-breadcrumb-item>
      <el-breadcrumb-item>客户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-container direction="vertical">
      <el-header height="140px">
<!--        模糊查询-->
        <div>
          <el-divider content-position="left">搜索条件</el-divider>
          <div>
            <el-row>
              <el-col :span="8"><div>客户名称:<el-input placeholder="例如:电击文库" v-model="fuzzyQueryData.customerName" clearable></el-input></div>
              </el-col><el-col :span="8"><div>联系人名称:<el-input placeholder="例如:川原砾" v-model="fuzzyQueryData.connectionPerson" clearable></el-input></div></el-col>
              <el-col :span="8"><div>联系人号码:<el-input placeholder="例如:12345678910" v-model="fuzzyQueryData.phone" clearable></el-input></div></el-col></el-row>
          </div>
          <br>
          <div align="center">
            <el-row>
              <el-button type="success" icon="el-icon-search" style="height: 40px" @click="fuzzyQuery(fuzzyQueryData)" round>搜索</el-button>
              <el-button type="warning" icon="el-icon-refresh-right" style="height: 40px" round>重置</el-button>
            </el-row>
          </div>
        </div>
      </el-header>
      <el-main>
        <div>
          <div style="background-color:#F2F2F2;height: 50px;padding: 5px 5px;">
            <span style="float: left;padding: 5px 5px;">
              <el-button type="primary"  icon="el-icon-circle-plus"@click="centerDialogVisible=true" round>添加用户</el-button>
            </span>
            <span style="float: right;padding:13px 5px;" class="size-icon">
              <i class="el-icon-caret-bottom" @click="loadBusCustomerAscList()"></i>
              <i class="el-icon-caret-top" @click="loadBusCustomerDescList()"></i>
            </span>
          </div>
          <template>
            <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100% ;border: solid 1px #F2F2F2;"
                >
              <el-table-column prop="id" label="ID" width="120" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="customerName" label="公司名字" width="120" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="connectionPerson" label="联系人姓名" width="120" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="phone" label="手机号码" width="120" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="telephone" label="移动电话" width="120" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="email" label="邮箱" width="120" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="address" label="地址" width="120" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="zip" label="邮政编码" width="120" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="account" label="银行卡号" width="120" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="bank" label="开户行" width="120" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="fax" label="传真号" width="120" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="sort" label="排序序号" width="120" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="enable" label="是否启用" width="120" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <el-switch
                      @change="toggleEnable(scope.row)"
                      v-model="scope.row.enable"
                      :active-value="1"
                      :inactive-value="0"
                      active-color="#13ce66"
                      inactive-color="#999">
                  </el-switch>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="100" align="center" fixed="right">
                <template slot-scope="scope">
                  <el-button type="primary" icon="el-icon-edit" circle size="mini"
                             @click="openEditDialog(scope.row)"></el-button>
                  <el-button type="danger" icon="el-icon-delete" circle size="mini"
                             @click="openDeleteConfirm(scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页控件 -->
            <div style="margin: 10px 0; text-align: right;">
              <el-pagination
                  @current-change="changePage"
                  layout="total, prev, pager, next"
                  :hide-on-single-page="true"
                  :page-size="pageSize"
                  :current-page="currentPage"
                  :total="total">
              </el-pagination>
            </div>

          </template>

          <el-dialog title="添加用户" :visible.sync="centerDialogVisible" width="50%" center>
            <div>
              <el-form :model="addForm" :rules="addFormrules" ref="addForm" label-width="100px">
                <el-row>
                  <el-col :span="12"><el-form-item label="公司名字:" prop="customerName"><el-input  style="width: 200px;" clearable v-model="addForm.customerName" class="dialogForm"></el-input></el-form-item></el-col>
                  <el-col :span="12"><el-form-item label="联系人姓名:" prop="connectionPerson"><el-input  style="width: 200px" clearable v-model="addForm.connectionPerson" class="dialogForm"></el-input></el-form-item></el-col>
                </el-row>
                <el-row >
                  <el-col :span="12"><el-form-item label="移动电话:" prop="telephone"><el-input  style="width: 200px" clearable v-model="addForm.telephone" class="dialogForm"></el-input></el-form-item></el-col>
                  <el-col :span="12"><el-form-item label="手机号码:" prop="phone"><el-input  style="width: 200px" clearable v-model="addForm.phone" class="dialogForm"></el-input></el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="12"><el-form-item label="邮箱:" prop="email"><el-input style="width: 200px" clearable  v-model="addForm.email" class="dialogForm"></el-input></el-form-item></el-col>
                  <el-col :span="12"><el-form-item label="传真号:" prop="fax"><el-input style="width: 200px" clearable  v-model="addForm.fax" class="dialogForm"></el-input></el-form-item></el-col>
                </el-row>
                <el-row >
                  <el-col :span="12"><el-form-item label="地址:" prop="address"><el-input  style="width: 200px" clearable v-model="addForm.address" class="dialogForm"></el-input></el-form-item></el-col>
                  <el-col :span="12"> <el-form-item label="邮政编码:" prop="zip"><el-input style="width: 200px" clearable  v-model="addForm.zip" class="dialogForm"></el-input></el-form-item></el-col>
                </el-row>
                <el-row >
                  <el-col :span="12"> <el-form-item label="银行卡号:" prop="account"><el-input  style="width: 200px" clearable v-model="addForm.account" class="dialogForm"></el-input></el-form-item></el-col>
                  <el-col :span="12"><el-form-item label="开户行:" prop="bank"><el-input  style="width: 200px" clearable v-model="addForm.bank" class="dialogForm"></el-input></el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="12"><el-form-item label="排序序号:" prop="sort"><el-input  style="width: 200px" clearable v-model="addForm.sort" class="dialogForm"></el-input></el-form-item></el-col>
                  <el-col :span="12"><el-form-item label="是否启用:">
                    <el-switch
                      v-model="addForm.enable"
                      :active-value="1"
                      :inactive-value="0"
                      active-color="#13ce66"
                      inactive-color="#999">
                  </el-switch>
                  </el-form-item></el-col>
                </el-row>
              </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click=" submitForm('addForm')">确 定</el-button>
              <el-button @click="resetForm('addForm')">重 置</el-button>
            </div>
          </el-dialog>


          <el-dialog title="编辑用户" :visible.sync="editFormVisible" width="50%" center>
            <div>
              <el-form :model="editForm" :rules="editFormrules" ref="editForm" label-width="100px">
                <el-row>
                  <el-col :span="12"><el-form-item label="公司名字:" prop="customerName"><el-input  style="width: 200px;" clearable v-model="editForm.customerName" class="dialogForm"></el-input></el-form-item></el-col>
                  <el-col :span="12"><el-form-item label="联系人姓名:" prop="connectionPerson"><el-input  style="width: 200px" clearable v-model="editForm.connectionPerson" class="dialogForm"></el-input></el-form-item></el-col>
                </el-row>
                <el-row >
                  <el-col :span="12"><el-form-item label="移动电话:" prop="telephone"><el-input  style="width: 200px" clearable v-model="editForm.telephone" class="dialogForm"></el-input></el-form-item></el-col>
                  <el-col :span="12"><el-form-item label="手机号码:" prop="phone"><el-input  style="width: 200px" clearable v-model="editForm.phone" class="dialogForm"></el-input></el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="12"><el-form-item label="邮箱:" prop="email"><el-input style="width: 200px" clearable  v-model="editForm.email" class="dialogForm"></el-input></el-form-item></el-col>
                  <el-col :span="12"><el-form-item label="传真号:" prop="fax"><el-input style="width: 200px" clearable  v-model="editForm.fax" class="dialogForm"></el-input></el-form-item></el-col>
                </el-row>
                <el-row >
                  <el-col :span="12"><el-form-item label="地址:" prop="address"><el-input  style="width: 200px" clearable v-model="editForm.address" class="dialogForm"></el-input></el-form-item></el-col>
                  <el-col :span="12"> <el-form-item label="邮政编码:" prop="zip"><el-input style="width: 200px" clearable  v-model="editForm.zip" class="dialogForm"></el-input></el-form-item></el-col>
                </el-row>
                <el-row >
                  <el-col :span="12"> <el-form-item label="银行卡号:" prop="account"><el-input  style="width: 200px" clearable v-model="editForm.account" class="dialogForm"></el-input></el-form-item></el-col>
                  <el-col :span="12"><el-form-item label="开户行:" prop="bank"><el-input  style="width: 200px" clearable v-model="editForm.bank" class="dialogForm"></el-input></el-form-item></el-col>
                </el-row>
                <el-row>
                  <el-col :span="12"><el-form-item label="排序序号:" prop="sort"><el-input  style="width: 200px" clearable v-model="editForm.sort" class="dialogForm"></el-input></el-form-item></el-col>
                  <el-col :span="12"><el-form-item label="是否启用:">
                    <el-switch
                        v-model="editForm.enable"
                        :active-value="1"
                        :inactive-value="0"
                        active-color="#13ce66"
                        inactive-color="#999">
                    </el-switch>
                  </el-form-item></el-col>
                </el-row>
              </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitEditForm()">确 定</el-button>
              <el-button @click="editFormVisible = false">取 消</el-button>
            </div>
          </el-dialog>


        </div>
      </el-main>
      <el-footer>
        <div align="center">欢迎使用-Welcome</div>
      </el-footer>
    </el-container>
  </div>
</template>




<script>
export default {
  name: "GoodsInportView",
  data() {
    return {
      fuzzyQueryData: {
        customerName: '',
        connectionPerson: '',
        phone: ''
      },

      func: 1,

      currentPage: this.$router.currentRoute.query.page ? parseInt(this.$router.currentRoute.query.page) : 1,
      pageSize: 20,
      total: 0,

      tableData: [],
      multipleSelection: [],

      centerDialogVisible: false,
      addForm: {
        customerName: 'lala',
        connectionPerson: 'Linger123',
        telephone: '',
        phone: '12345678900',
        email: '2863790543@qq.com',
        fax: '',
        address: '啦啦啦',
        zip: '',
        account: '',
        bank: '',
        sort: '',
        enable: '',
      },
      addFormrules: {
        customerName: [
          {required: true, message: '请输入公司姓名', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        connectionPerson: [
          {required: true, message: '请输入联系人姓名', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
          {min: 11, max: 11, message: '长度为11个字符', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入电子邮箱', trigger: 'blur'},
          {min: 8, max: 35, message: '长度在 8 到 35 个字符', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入地址', trigger: 'blur'},
        ]
      },
      editFormVisible: false,
      editForm: {
        customerName: '',
        connectionPerson: '',
        telephone: '',
        phone: '',
        email: '',
        fax: '',
        address: '',
        zip: '',
        account: '',
        bank: '',
        sort: '',
        enable: 1,
      },
      editFormrules: {
        customerName: [
          {required: true, message: '请输入公司姓名', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        connectionPerson: [
          {required: true, message: '请输入联系人姓名', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
          {min: 11, max: 11, message: '长度为11个字符', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入电子邮箱', trigger: 'blur'},
          {min: 8, max: 35, message: '长度在 8 到 35 个字符', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入地址', trigger: 'blur'},
        ]
      }
    }
  },
  methods: {
    // 切换启用状态
    toggleEnable(tableItem) {
      let enableText = ['禁用', '启用'];
      let url = 'http://localhost:9090/busCustomer/ban/' + tableItem.id;
      if (tableItem.enable == 0) {
        url += '/disable';
      } else {
        url += '/enable';
      }
      console.log('url = ' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: enableText[tableItem.enable] + '标签成功！',
            type: 'success'
          });
        } else {
          let title = '操作失败';
          this.$alert(jsonResult.message, title, {
            confirmButtonText: '确定',
            callback: action => {
              if (jsonResult.state == 40400) {
                this.loadBusCustomerList();
              }
            }
          });
        }
      });
    },
    fuzzyQuery(fuzzyQueryData) {
      let func = 2;

      let fuzzyQueryFormData = this.qs.stringify(this.fuzzyQueryData);
      console.log('fuzzyQueryFormData = ' + fuzzyQueryFormData);

      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }

      let url = 'http://localhost:9090/busCustomer/query-get?page=' + page;
      console.log('url = ' + url);

      this.axios.create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post(url, fuzzyQueryFormData).then((response) => {
        let jsonResult = response.data;
        console.log('jsonResult = ' + jsonResult.data);
        console.log('jsonResult=' + response.data)
        if (jsonResult.state == 20000) {
          this.tableData = jsonResult.data.list;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.total = jsonResult.data.total;
        }
      }).catch(err => {
        let message = '服务器响应错误！';
        this.$alert(message, '操作失败', {
          confirmButtonText: '确定', title,
          callback: action => {
          }
        });
      });
    },
    // 切换分页
    changePage(page) {
      this.$router.replace('?page=' + page);
      this.loadBusCustomerList();
    },
    // 打开编辑对话框
    openEditDialog(tableItem) {
      let url = 'http://localhost:9090/busCustomer/' + tableItem.id + '/getById';
      console.log('url = ' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.editForm = jsonResult.data;
          this.editFormVisible = true;
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadBusCustomerList();
            }
          });
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    // 提交编辑表单
    submitEditForm() {
      let url = 'http://localhost:9090/busCustomer/update';
      console.log('url = ' + url);

      let editFormData = this.qs.stringify(this.editForm);
      console.log('editFormData = ' + editFormData);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post(url, editFormData).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '修改成功！',
            type: 'success'
          });
          this.editFormVisible = false;
          this.loadBusCustomerList();
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.editFormVisible = false;
              this.loadBusCustomerList();
            }
          });
        } else if (jsonResult.state == 40900) {
          this.$message.error(jsonResult.message);
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.editFormVisible = false;
              this.loadBusCustomerList();

            }
          });
        }
      });
    },
    // 打开删除确认框
    openDeleteConfirm(category) {
      let message = '此操作将永久删除【' + category.customerName + '】，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(category);
      }).catch(() => {
      });
    },
    // 处理删除
    handleDelete(category) {
      let url = 'http://localhost:9090/busCustomer/' + category.id + "/delete";
      console.log('url = ' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '删除【' + category.customerName + '】成功！',
            type: 'success'
          });
          this.loadBusCustomerList();

        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadBusCustomerList();

            }
          });
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    handleClick(row) {
      console.log(row);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    // 提交表单
    submitForm(addForm) {
      this.$refs[addForm].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:9090/busCustomer/add-new';
          console.log('url = ' + url);

          let addformData = this.qs.stringify(this.addForm);
          console.log('addformData = ' + addForm);

          this.axios.post(url, addformData).then((response) => {
            let jsonResult = response.data;
            console.log(jsonResult);
            if (jsonResult.state == 20000) {
              this.$message({
                showClose: true,
                message: '添加客户成功！',
                type: 'success'
              });

              this.resetForm(addForm);

            } else {
              this.$message({
                showClose: true,
                message: jsonResult.message,
                type: 'error'
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置表单
    resetForm(addForm) {
      this.$refs[addForm].resetFields();
    },
    // 加载用户列表
    loadBusCustomerList() {
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }

      let url = 'http://localhost:9090/busCustomer/get-id?page=' + page;
      console.log('url = ' + url);

      this.axios.create({'headers': {'Authorization': localStorage.getItem('localJwt')}}).get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.tableData = jsonResult.data.list;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.total = jsonResult.data.total;
        }
      }).catch(err => {
        let message = '服务器响应错误！';
        this.$alert(message, '操作失败', {
          confirmButtonText: '确定', title,
          callback: action => {
          }
        });
      });
    },

// 加载用户列表
  loadBusCustomerAscList() {
    let page = this.$router.currentRoute.query.page;
    if (!page) {
      page = 1;
    }

    let url = 'http://localhost:9090/busCustomer/get-idAsc?page=' + page;
    console.log('url = ' + url);

    this.axios.create({'headers': {'Authorization': localStorage.getItem('localJwt')}}).get(url).then((response) => {
      let jsonResult = response.data;
      if (jsonResult.state == 20000) {
        this.tableData = jsonResult.data.list;
        this.currentPage = jsonResult.data.currentPage;
        this.pageSize = jsonResult.data.pageSize;
        this.total = jsonResult.data.total;
      }
    }).catch(err => {
      let message = '服务器响应错误！';
      this.$alert(message, '操作失败', {
        confirmButtonText: '确定', title,
        callback: action => {
        }
      });
    });
  },
// 加载用户列表
  loadBusCustomerDescList() {
    let page = this.$router.currentRoute.query.page;
    if (!page) {
      page = 1;
    }

    let url = 'http://localhost:9090/busCustomer/get-idDesc?page=' + page;
    console.log('url = ' + url);

    this.axios.create({'headers': {'Authorization': localStorage.getItem('localJwt')}}).get(url).then((response) => {
      let jsonResult = response.data;
      if (jsonResult.state == 20000) {
        this.tableData = jsonResult.data.list;
        this.currentPage = jsonResult.data.currentPage;
        this.pageSize = jsonResult.data.pageSize;
        this.total = jsonResult.data.total;
      }
    }).catch(err => {
      let message = '服务器响应错误！';
      this.$alert(message, '操作失败', {
        confirmButtonText: '确定', title,
        callback: action => {
        }
      });
    });
  }}, mounted() {
    this.loadBusCustomerList();
  }
}


</script>

<style scoped>
.el-row {
}

.el-col {

}

.el-input {
  width: 250px;

}

.BusCustomerAddNew {
  width: 150px;
}

.size-icon {
  font-size: 25px;
}

.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-dialog {
  text-align: center;
}


</style>

